<template>
	<view class="release">
		<navBar isBack backColor="#fff" title="施工播报" color="#fff" background="transparent"></navBar>
		<view class="r_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		
		<!-- 上传图片或视频 -->
		<view class="uploadFile" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="fileList">
				<view class="mediaBox" v-if="type==0">
					<view class="fileItem" v-for="(item,index) in imgList" :key="index">
						<image :src="item.path" mode=""></image>
						<image :src="`${baseImg}/static/constr/remove.png`" mode="" @click="removeImg(index)"></image>
					</view>
				</view>
				<view class="mediaBox" v-else>
					<view class="fileItem" v-for="(item,index) in imgList" :key="index">
						<video :show-center-play-btn="false" :src="item.path" @pause="stopVideo" controls @fullscreenchange="openBig" play-btn-position="center"></video>
						<image :src="`${baseImg}/static/constr/remove.png`" mode="" @click="removeImg(index)"></image>
					</view>
				</view>
				
				<!-- 上传按钮 -->
				<view class="uploadBtn" @click="uploadFN">
					<image :src="`${baseImg}/static/constr/camera.png`" mode=""></image>
					照片/视频
				</view>
			</view>
			
			<!-- 当前进度信息 -->
			<view class="text">
				<textarea value="" maxlength="1000" @input="areaChange" v-model="title" placeholder="说说当前的进度吧" />
				<span>{{num}}/1000</span>
			</view>
		</view>
		
		<!-- 发布按钮 -->
		<view class="btn">
			<view class="btnLeft">
				<view class="img">
					<image :src="`${baseImg}/static/constr/storage.png`" mode=""></image>
				</view>
				存草稿
			</view>
			<button type="default" @click="submitFN">发布</button>
		</view>
	</view>
</template>

<script>
	import service_constr from '@/service/constr.js'
	import URL from '@/config/url.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				navHeight:0,
				imgList:[],
				order_id:null,
				title:'',
				type:0,
				num:0,
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.type = options.type
			this.navHeight = 192 - Number(this.$store.state.system.navBarHeight)*2
		},
		methods:{
			
			// 输入的字数
			areaChange(e){
				this.num = e.detail.cursor
			},
			
			// 上传
			uploadFN(){
				console.log(this.imgList)
				if(this.type==0){
					uni.chooseImage({
						count:1,
					    success: (res) => {
					        const tempFilePaths = res.tempFilePaths;
					        uni.uploadFile({
					            url: URL.ENTER_UPLOAD_IMAGE,
					            filePath: tempFilePaths[0],
					            name: 'file',
					            formData: {
					                'user': 'test'
					            },
					            success: (uploadFileRes) => {
									uni.showLoading({
										title:'上传中'
									})
					                console.log(uploadFileRes.data);
									let data = JSON.parse(uploadFileRes.data)
									if(data.code==1){
										let obj = {
											path:data.data.url,
											id:data.data.id
										}
										this.imgList.push(obj)
										uni.showToast({
											title:'上传成功',
											icon:'success'
										})
									}else{
										uni.showToast({
											title:data.msg,
											icon:'none'
										})
									}
									setTimeout(function(){
										uni.hideLoading()
									},500)
					            }
					        });
					    }
					});
				}else{
					uni.chooseVideo({
					    count: 1,
					    sourceType: ['camera', 'album'],
						compressed:false,
					    success:res=>{
					       const tempFilePaths = res.tempFilePath;
						   console.log(tempFilePaths)
					       uni.uploadFile({
					           url: URL.ENTER_UPLOAD_IMAGE,
					           filePath: tempFilePaths,
					           name: 'file',
					           success: (uploadFileRes) => {
					       		uni.showLoading({
					       			title:'上传中'
					       		})
					               console.log(uploadFileRes.data);
					       		let data = JSON.parse(uploadFileRes.data)
					       		if(data.code==1){
									console.log(data)
					       			let obj = {
					       				path:data.data.url,
					       				id:data.data.id
					       			}
					       			this.imgList.push(obj)
					       			uni.showToast({
					       				title:'上传成功',
					       				icon:'success'
					       			})
									console.log(this.imgList)
					       		}else{
					       			uni.showToast({
					       				title:data.msg,
					       				icon:'none'
					       			})
					       		}
					       		setTimeout(function(){
					       			uni.hideLoading()
					       		},500)
					           }
					       });
					    }
					});
				}
			},
			
			//移除图片
			removeImg(index){ 
				this.imgList.splice(index,1)
			},
			
			// 发布按钮
			submitFN(){
				let arr = []
				this.imgList.map(item=>{
					arr.push(item.id)
				})
				if(!arr.length){
					uni.showToast({
						title:this.type==0?'请上传图片':'请上传视频',
						icon:'none'
					})
					return
				}
				if(this.title==''){
					uni.showToast({
						title:'请填写播报信息',
						icon:'none'
					})
					return
				}
				let params={
					order_id:this.order_id,
					title:this.title,
					media:arr.join(','),
					type:this.type
				}
				service_constr.addBroad(params).then(res=>{
					if(res.code==1){
						this.title = '';
						this.imgList = [];
						uni.showToast({
							title:'发布成功',
							icon:'success'
						})
						uni.navigateBack({
							delta:1
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.release{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.r_topImg{width: 100%;height: 192rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		
		// 上传图片或视频
		.uploadFile{
			padding: 40rpx 24rpx 0;
			width: 100%;
			.fileList{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.mediaBox{
					display: flex;
					flex-wrap: wrap;
					align-items: center;
				}
				.fileItem{
					margin-right: 8rpx;
					border-radius: 4rpx;
					position: relative;
					video{
						width: 260rpx;
						height: 164rpx;
						border-radius: 4rpx;
					}
					image:nth-child(1){
						width: 164rpx;
						height: 164rpx;
						border-radius: 4rpx;
					}
					image:nth-child(2){
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				.uploadBtn{
					width: 164rpx;
					height: 164rpx;
					border: 2rpx solid #f5f5f5;
					border-radius: 4rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image{width: 48rpx;height: 48rpx;}
					font: 400 18rpx/20rpx PingFang SC;
					color: #A0A0A0;
				}
				
			}
			
			.text{
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 232rpx;
				border-bottom: 2rpx solid #F5F5F5;
				textarea{
					width: 100%;
					height: 186rpx;
				}
				span{
					margin-left: auto;
				}
			}
		}
		
		// 发布按钮
		.btn{
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			height: 100rpx;
			display: flex;
			padding: 0rpx 24rpx;
			align-items: center;
			justify-content: space-between;
			height: calc(100rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(100rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.btnLeft{
				display: flex;
				flex-direction: column;
				align-items: center;
				font: 400 18rpx/20rpx PingFang SC;
				color: #A0A0A0;
				.img{
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background-color: #F5F5F5;
					image{width: 48rpx;height: 48rpx;}
				}
			}
			button{
				width: 606rpx;
				height: 80rpx;
				margin: 10rpx 0;
				background-image: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 6rpx 12rpx rgba(219, 169, 84, 0.3);
				border-radius: 46rpx;
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
